<script id="settingTemp" type="text/x-kendo-template">
    <div id="setting">
        <div class="card mb-3">
            <h5 class="card-header"><i class="fas fa-layer-group mr-2"></i>整体框架布局<small class="text-black-50 ml-2">Layout Edition</small></h5>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 col-xl-2 d-flex align-items-center my-1">
                        <input class="k-radio" id="edition1" name="edition" type="radio" value="router" checked>
                        <label class="k-radio-label" for="edition1">
                            <span class="mr-1">路由版</span>
                            <small class="text-black-50">Router Edition</small>
                        </label>
                    </div>
                    <div class="col-md-4 col-xl-2 d-flex align-items-center my-1">
                        <input class="k-radio" id="edition2" name="edition" type="radio" value="iframe">
                        <label class="k-radio-label" for="edition2">
                            <span class="mr-1">框架版</span>
                            <small class="text-black-50">iFrame Edition</small>
                        </label>
                    </div>
                    <div class="col-md-4 col-xl-2 d-flex align-items-center my-1">
                        <input class="k-radio" id="edition3" name="edition" type="radio" value="tabstrip">
                        <label class="k-radio-label" for="edition3">
                            <span class="mr-1">标签版</span>
                            <small class="text-black-50">Tabstrip Edition</small>
                        </label>
                    </div>
                    <div class="col-md-4 col-xl-2 d-flex align-items-center my-1">
                        <input class="k-radio" id="edition4" name="edition" type="radio" value="splitter_router">
                        <label class="k-radio-label" for="edition4">
                            <span class="mr-1">布局路由版</span>
                            <small class="text-black-50">Splitter Router Edition</small>
                        </label>
                    </div>
                    <div class="col-md-4 col-xl-2 d-flex align-items-center my-1">
                        <input class="k-radio" id="edition5" name="edition" type="radio" value="splitter_iframe">
                        <label class="k-radio-label" for="edition5">
                            <span class="mr-1">布局框架版</span>
                            <small class="text-black-50">Splitter iFrame Edition</small>
                        </label>
                    </div>
                    <div class="col-md-4 col-xl-2 d-flex align-items-center my-1">
                        <input class="k-radio" id="edition6" name="edition" type="radio" value="splitter_tabstrip">
                        <label class="k-radio-label" for="edition6">
                            <span class="mr-1">布局标签版</span>
                            <small class="text-black-50">Splitter Tabstrip Edition</small>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header"><i class="fas fa-palette mr-2"></i>主题配色<small class="text-black-50 ml-2">Theme Color</small></h5>
            <div class="card-body">
                <div class="d-flex justify-content-center flex-wrap">
                    <div class="mx-3 mb-3 mb-xl-0">
                        <h3 class="lead text-center text-muted mb-0">IKKI Amikoko</h3>
                        <div id="IKKIAmikoko"></div>
                    </div>
                    <div class="mx-3 mb-3 mb-xl-0">
                        <h3 class="lead text-center text-muted mb-0">Ant Design</h3>
                        <div id="AntDesign"></div>
                    </div>
                    <div class="mx-3 mb-3 mb-xl-0">
                        <h3 class="lead text-center text-muted mb-0">Kendo UI Sass</h3>
                        <div id="KendoUISass"></div>
                    </div>
                    <div class="mx-3 mb-3 mb-xl-0">
                        <h3 class="lead text-center text-muted mb-0">Bootstrap v4</h3>
                        <div id="Bootstrap"></div>
                    </div>
                    <div class="mx-3 mb-3 mb-xl-0">
                        <h3 class="lead text-center text-muted mb-0">Material Design</h3>
                        <div id="MaterialDesign"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header"><i class="fas fa-globe mr-2"></i>组件语言<small class="text-black-50 ml-2">Component Localization</small></h5>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="zh-CHS">
                            <i class="flag-icon flag-icon-cn mb-1"></i>
                            <span>中文简体</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="zh-CHT">
                            <i class="flag-icon flag-icon-hk mb-1"></i>
                            <span>中文繁體</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="en-US">
                            <i class="flag-icon flag-icon-gb mb-1"></i>
                            <span>English</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="ru-RU">
                            <i class="flag-icon flag-icon-ru mb-1"></i>
                            <span>Русский</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="fr-FR">
                            <i class="flag-icon flag-icon-fr mb-1"></i>
                            <span>Français</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="de-DE">
                            <i class="flag-icon flag-icon-de mb-1"></i>
                            <span>Deutsch</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="it-IT">
                            <i class="flag-icon flag-icon-it mb-1"></i>
                            <span>Italiano</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="pt-PT">
                            <i class="flag-icon flag-icon-pt mb-1"></i>
                            <span>Português</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="es-ES">
                            <i class="flag-icon flag-icon-es mb-1"></i>
                            <span>Español</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="ar-SA">
                            <i class="flag-icon flag-icon-sa mb-1"></i>
                            <span>العربية</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="ja-JP">
                            <i class="flag-icon flag-icon-jp mb-1"></i>
                            <span>日本語</span>
                        </label>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <label class="k-radio-label flex-column align-items-center">
                            <input class="k-radio" name="language" type="radio" value="ko-KR">
                            <i class="flag-icon flag-icon-kr mb-1"></i>
                            <span>한국어</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <h5 class="card-header"><i class="fas fa-cogs mr-2"></i>功能开关<small class="text-black-50 ml-2">Function Switch</small></h5>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">全局搜索</span>
                            <input id="globalSearchSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">刷新</span>
                            <input id="refreshSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">全屏</span>
                            <input id="fullScreenSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">锁屏</span>
                            <input id="lockScreenSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">主题</span>
                            <input id="themeSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">语言</span>
                            <input id="localizationSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">消息</span>
                            <input id="messageSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">提醒</span>
                            <input id="noticeSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">聊天机器人</span>
                            <input id="botSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">天气预报</span>
                            <input id="weatherForecastSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">万年历</span>
                            <input id="perpetualCalendarSwitch" type="checkbox">
                        </div>
                    </div>
                    <div class="col-4 col-md-3 col-lg-2 col-xl-1 my-2">
                        <div class="d-flex flex-column align-items-center">
                            <span class="mb-1">便签</span>
                            <input id="noteSwitch" type="checkbox">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        #setting .k-radio[name="edition"] + label {
            flex-wrap: wrap;
            align-items: flex-start;
        }
        @media only screen and (min-width: 768px) and (max-width: 1799px) {
            #setting .k-radio[name="edition"] + label {
                flex-direction: column;
            }
        }
        @media only screen and (min-width: 1024px) and (max-width: 1199px) {
            #setting .k-radio[name="edition"] + label {
                flex-direction: row;
            }
        }
        #setting path {
            cursor: pointer;
        }
        #setting .k-radio[name="language"],
        #setting .k-radio[name="language"]:before {
            display: none;
        }
        #setting .flag-icon {
            border: 1px solid #ccc;
            width: 42px;
            height: 32px;
        }
    </style>
</script>